<template>
  <div class="homeBannerTwo">
    <section>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href>提醒会员谨防诈骗电话</a>
          </div>
          <div class="swiper-slide">
            <a href>近期物流情况安排通知</a>
          </div>
          <div class="swiper-slide">
            <a href>PLUS会员特权变动通知</a>
          </div>
        </div>
      </div>
      <span class="homeBannerTwoTitle">
        <img src="../../assets/icon/1577158305063.jpg" alt />
      </span>
    </section>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  name: "homeBannerTwo",
  mounted() {
    new Swiper(".homeBannerTwo .swiper-container", {
      loop: true,
      direction: "vertical",
      pagination: {
        el: ".homeBannerTwo .swiper-pagination"
      },
      autoplay: true,
      observer: true,
      observeParents: true
    });
  }
};
</script>

<style scoped>
.homeBannerTwo section {
  position: relative;
  height: 0.7rem;
  line-height: 0.7rem;
  overflow: hidden;
  background: #fff;
}

.homeBannerTwo section .swiper-container{
    height: 100%;
}

.homeBannerTwoTitle {
  display: block;
  height: 0.34rem;
  position: absolute;
  top: 0.1rem;
  left: 0.16rem;
  padding: 0.06rem 0.16rem 0.06rem 0;
  border-right: 0.01rem solid #ccc;
  box-sizing: content-box;
}

.homeBannerTwoTitle img {
  width: 1.18rem;
  vertical-align: top;
}

.swiper-container {
  padding-left: 1.6rem;
}

.homeBannerTwo .swiper-slide a {
  display: block;
  overflow: hidden;
  padding-left: 0.12rem;
  color: #666;
}
</style>